$(function () {
  // 图表1 数据可视化 

  // 1- 创建图表的实例，指定图表父容器
  var myChart1 = echarts.init(document.getElementById('c1'));

  // 2-指定图表的数据和相关设置 
  var option1 = {
    // 标题
    title: {
      text: '2020年注册人数'
    },
    // 提示工具
    tooltip: {},
    // 图例
    legend: {
      data: ['销量', '注册人数']
    },
    // x轴
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    // y轴：无需设置， y轴 会根据数据自动生成
    yAxis: {},
    // 数据 
    series: [
      {
        name: '销量',
        type: 'bar', // bar 柱图 line  线图  pie 饼图
        data: [23, 20, 136, 60, 20, 90]
      },
      {
        name: '注册人数',
        type: 'line', // bar 柱图 line  线图  pie 饼图
        data: [23, 20, 136, 60, 20, 90]
      }
    ]
  };

  // 3-通过图表的实例 把数据 绘制在页面上 
  myChart1.setOption(option1);


  // 图表2 
  // 1- 创建图表的实例，指定图表父容器
  var myChart2 = echarts.init(document.getElementById('c2'));

  // 2-指定图表的数据和相关设置 
  var option2 = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['洗脸', '护肤', '洁净', '面膜保养', '去除豆豆']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: '洗脸' },
          { value: 310, name: '护肤' },
          { value: 234, name: '洁净' },
          { value: 135, name: '面膜保养' },
          { value: 1548, name: '去除豆豆' }
        ]
      }
    ]
  };

  // 3-通过图表的实例 把数据 绘制在页面上 
  myChart2.setOption(option2);


})